<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app_zl">
    <div>
        商品编号：<input v-model="id" v-color="'red'">
<!--        自定义v-focus 获取焦点-->
        商品名称：<input v-model="name" v-focus>
    </div>
</div>

<script>
    //Vue.directive 定义全局指令
    // 参数1： 指令的名称，在定义的时候，指令名称前面不需要加v-前缀；在调用
    //的时候，必须在指令名称前加上 v- 前缀来进行调用
    // 参数2: 为一个对象，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
    Vue.directive('focus', {
        bind: function (el) {
            //当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
            console.log('bind')

        },
        inserted: function (el) {
            // inserted 表示 元素 插入到DOM中的时候，会执行inserted函数， 只执行一次
            el.focus();
            console.log('inserted')
        },
        update: function (el) {
            // 当VNode更新的时候，会执行updated，可能会触发多次
            console.log('update')
        },
        unbind: function (el) {
            console.log('unbind')

        }
    })

    // 自定义一个设置字体颜色的指令
    // Vue.directive('color', {
    //     bind:function (el, binding) {
    //         console.log('binding.value='+binding.value)
    //         el.style.color = binding.value;
    //     }
    // })

    //全局定义指令简写， 简写会在bind 和 update 中添加函数
    Vue.directive('color', function (el, binding) {
        el.style.color = binding.value;
    })

    new Vue({
        el: '#app_zl',
        data: {
            id: '',
            name: ''
        },
        methods: {}
    })
</script>
</body>
</html>